<template>
	<div class="top_item">
		<el-tooltip class="item" effect="dark" content="锁屏" placement="bottom">
			<span class="iconfont el-suodingmima" @click="handleLock"></span>
		</el-tooltip>
		<el-dialog title="设置锁屏密码" :visible.sync="dialogLock" width="30%" append-to-body>
	      	<el-form :model="lockForm" ref="lockForm" label-width="80px" size="small">
		        <el-form-item label="锁屏密码" prop="password" :rules="[{ required: true, message: '锁屏密码不能为空'}]">
		          <el-input v-model="lockForm.password" placeholder="请输入锁屏密码"></el-input>
		        </el-form-item>
	      	</el-form>
	      	<span slot="footer" class="dialog-footer">
	        	<el-button type="primary" @click="setLockBtn" size="small">确 定</el-button>
	      	</span>
	    </el-dialog>
	</div>
</template>
<script>
	export default{
		name:'top-lock',
		data(){
			return {
				dialogLock:false,
				lockForm:{
					password:''
				}
			}
		},
		methods:{
			handleLock(){
				this.dialogLock = true;
			},
			setLockBtn(){
				this.$refs.lockForm.validate(valid=>{
					if(valid){
						this.$store.commit('setLockPass',this.lockForm.password);
						this.dialogLock = false;
						this.$store.commit('setLock');
						this.$router.push('/lock')
					}else{
						return false
					}
				})
			}
		}
	}
</script>